<!--
    @Title: Three
    @Author  dudalei
    @Package
    @Date  2025/5/9 23:54
    @description:
-->
<script setup lang="ts">
import { AmbientLight, DirectionalLight, PerspectiveCamera, Scene, WebGLRenderer } from 'three'
import { inject, onMounted } from 'vue'
import { AmapAndThreeInjectKey } from '@/components/AmapThree/index.ts'

const mapStore = inject(AmapAndThreeInjectKey)

function initThree() {
  if (!mapStore) {
    return
  }
  // 这里我们的地图模式是 3D，所以创建一个透视相机，相机的参数初始化可以随意设置，因为在 render 函数中，每一帧都需要同步相机参数，因此这里变得不那么重要。
  // 如果你需要 2D 地图（viewMode: '2D'），那么你需要创建一个正交相机
  const camera = new PerspectiveCamera(60, window.innerWidth / window.innerHeight, 100, 1 << 30)

  const renderer = new WebGLRenderer({
    // context: gl, // 地图的 gl 上下文
    alpha: true,
    antialias: true,
    // canvas: gl.canvas,
  })

  // 自动清空画布这里必须设置为 false，否则地图底图将无法显示
  renderer.autoClear = false
  const scene = new Scene()

  // 环境光照和平行光
  const aLight = new AmbientLight(0xffffff, 3)
  const dLight = new DirectionalLight(0xffffff, 10)
  dLight.position.set(1000, -100, 900)
  scene.add(dLight)
  scene.add(aLight)
  mapStore.camera = camera
  mapStore.renderer = renderer
  mapStore.scene = scene
}

onMounted(initThree)
</script>

<template><div v-if="false"></div></template>

<style scoped></style>
